<template>
  <div class="hmax wmax templateDesigner">
    <div class="table-container">
      <toolbar />
      <div class="cellInfo">
        <div class="unit">
          <div class="cell">
            <span>{{ cellInfo.cell }}</span>
          </div>
          <div class="data">
            <span>{{ cellInfo.data }}</span>
            <div class="resize-icon-whitespace" />
          </div>
        </div>
      </div>
      <div class="hot-root" ref="hot-root">
        <div id="template-designer" />
      </div>
    </div>
    <el-aside
      width="400px"
      ref="right-aside"
      class="right-aside"
      :class="{ 'right-aside_visible': rightVisible }"
    >
      <!-- 右侧面板 -->
      <panel-element
        ref="_panelElement"
        :modelCode="excelInfo.modelCode"
        @changeData="receiveData"
        @closePanel="closePanel"
      />
    </el-aside>
  </div>
</template>
<script>
import "handsontable/dist/handsontable.full.css"
import "handsontable/languages"
import Handsontable from "handsontable"
import Excel from "./excel/index"
import toolbar from "./toolbar/index.vue"
import PanelElement from "./panel/index.vue"
export default {
  components: {
    toolbar,
    PanelElement,
  },
  props: ["excelInfo"],
  data() {
    return {
      cellInfo: {
        cell: "",
        data: "",
      },
      rightVisible: false,
      modelData: {},
      configCell: {
        row: null,
        col: null,
      },
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      Excel.init(
        document.querySelector("#template-designer"),
        Handsontable,
        this.excelInfo.json
      )
      Excel.injectListener("updateCellUnit", (info) => {
        this.cellInfo = info
      })
      Excel.injectListener("togglePanel", this.togglePanel)
    },
    saveAllSettings() {
      return Excel.saveAllSettings()
    },
    // 全局配置
    openGlobalPanel() {
      this.modelData = {
        name: this.excelInfo.name,
        key: this.excelInfo.key,
        modelCode: this.excelInfo.modelCode,
        modelName: this.excelInfo.modelName,
        serviceKey: Excel.getSettings().serviceKey || "",
        type: 1,
      }
      this.rightVisible = true
      this.$refs._panelElement.init(this.modelData)
      Excel.togglePanelShow(true, 1)
    },
    // 点击单元格打开关闭配置面板
    togglePanel(cell, data, type, bool) {
      // 保存后的操作
      if (bool) {
        if (type === 1) {
          this.modelData = {
            name: this.excelInfo.name,
            key: this.excelInfo.key,
            modelCode: this.excelInfo.modelCode,
            modelName: this.excelInfo.modelName,
            serviceKey: Excel.getSettings().serviceKey || "",
            type,
          }
        } else {
          this.modelData = {
            ...data,
            type,
            cellInfo_data: cell.cellInfo.data,
          }
        }
        this.$refs._panelElement.init(this.modelData)
      }
      this.rightVisible = bool
      this.configCell = cell
    },
    receiveData(data) {
      Excel.updateSettings({ ...data, ...this.configCell })
    },
    closePanel() {
      this.rightVisible = false
      Excel.togglePanelShow(false, this.modelData.type)
    },
  },
}
</script>

<style lang="scss">
@import "../rightModel/excel/main.scss";
.hmax {
  height: 100%;
}
.templateDesigner {
  height: 100%;
  overflow: hidden;
  position: relative;
  .table-container {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    .cellInfo {
      position: relative;
      user-select: auto;
      width: auto;
      height: auto;
      max-height: 140px;
      min-height: 30px;
      box-sizing: border-box;
      .unit {
        width: 100%;
        min-height: 24px;
        max-height: 140px;
        overflow: hidden;
        display: flex;
        border-left: 1px solid #e4ebf0;
        position: absolute;
        align-items: stretch;
        top: 0;
        bottom: 0;
        .cell {
          min-width: 73px;
          border-right: 1px solid #e4ebf0;
          display: flex;
          flex-shrink: 0;
          padding: 0 6px;
          box-sizing: border-box;
        }
        .data {
          resize: none;
          width: 100%;
          border: none;
          white-space: pre-line;
          padding: 5px;
          box-sizing: border-box;
          overflow: auto;
          font-size: 12px;
          color: #0a131a;
          line-height: 20px;
          text-align: justify;
          word-break: break-all;
          .resize-icon-whitespace {
            position: absolute;
            bottom: 0;
            height: 6px;
            width: calc(100% - 10px);
            background: #fff;
          }
        }
      }
    }
    .hot-root {
      flex: 1;
      width: 100%;
      overflow: hidden;
      .handsontable {
        width: 100%;
      }
    }
  }
  .el-aside {
    position: absolute;
    top: 0;
    background: #fff;
    z-index: 1;
    height: 100%;
    box-shadow: 0px 0px 4px 4px #eee;
    overflow: hidden;
  }
  .right-aside {
    right: -500px;
    border-left: 1px solid #dcdfe6;
    transition: all 0.3s;
    &_visible {
      right: 0;
    }
  }
}
</style>
